@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />

    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryDayRegData();
        });

        //图表属性，不包含数据
        var dayLogOptions = {
            chart: {
                renderTo:'dayLogCon',
                type:'spline'
            },
            title: {
                text: '会员日登录数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '日登录数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总数'
            }, {
                name: 'web'
            }, {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: '次'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var weekLogOptions = {
            chart: {
                renderTo:'weekLogCon',
                type:'spline'
            },
            title: {
                text: '周登录据统计（工作周）',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '周登录'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总数'
            },{
                name: 'web'
            }, {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: '次'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var monthLogOptions = {
            chart: {
                renderTo:'monthLogCon',
                type:'spline'
            },
            title: {
                text: '月登录数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '月登录数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总数'
            },{
                name: 'web'
            }, {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: '次'
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var dayLogCategories = [];
        var dayTotalLogDatas = [];
        var dayWebLogDatas = [];
        var dayIosLogDatas = [];
        var dayAndroidLogDatas = [];

        var weekLogCategories = [];
        var weekTotalLogDatas = [];
        var weekWebLogDatas = [];
        var weekIosLogDatas = [];
        var weekAndroidLogDatas = [];

        var monthLogCategories = [];
        var monthTotalLogDatas = [];
        var monthWebLogDatas = [];
        var monthIosLogDatas = [];
        var monthAndroidLogDatas = [];

        //Ajax 获取数据并解析创建Highcharts图表
        function queryDayRegData() {

            $.ajax({
                url:'/userstatistic/user-day-log',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        dayLogCategories[i] = n[0];

                        for(var j in n[1]){

                            if(j=='total'){
                                dayTotalLogDatas[i] = n[1][j]*1;
                            }
                            if(j=='web'){
                                dayWebLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                dayIosLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                dayAndroidLogDatas[i] = n[1][j]*1;
                            }
                        }

                    });

                    dayLogOptions.xAxis.categories = dayLogCategories;
                    dayLogOptions.series[0].data = dayTotalLogDatas;
                    dayLogOptions.series[1].data = dayWebLogDatas;
                    dayLogOptions.series[2].data = dayIosLogDatas;
                    dayLogOptions.series[3].data = dayAndroidLogDatas;
                    chart = new Highcharts.Chart(dayLogOptions);
                }
            });



            $.ajax({
                url:'/userstatistic/user-week-log',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        weekLogCategories[i] = n[0];

                        for(var j in n[1]){
                            if(j=='total'){
                                weekTotalLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='web'){
                                weekWebLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                weekIosLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                weekAndroidLogDatas[i] = n[1][j]*1;
                            }
                        }
                    });

                    weekLogOptions.xAxis.categories = weekLogCategories;
                    weekLogOptions.series[0].data = weekTotalLogDatas;
                    weekLogOptions.series[1].data = weekWebLogDatas;
                    weekLogOptions.series[2].data = weekIosLogDatas;
                    weekLogOptions.series[3].data = weekAndroidLogDatas;
                    chart = new Highcharts.Chart(weekLogOptions);
                }
            });



            $.ajax({
                url:'/userstatistic/user-month-log',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        monthLogCategories[i] = n[0];
                        for(var j in n[1]){
                            if(j=='total'){
                                monthTotalLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='web'){
                                monthWebLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                monthIosLogDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                monthAndroidLogDatas[i] = n[1][j]*1;
                            }
                        }
                    });
                    monthLogOptions.xAxis.categories = monthLogCategories;
                    monthLogOptions.series[0].data = monthTotalLogDatas;
                    monthLogOptions.series[1].data = monthWebLogDatas;
                    monthLogOptions.series[2].data = monthIosLogDatas;
                    monthLogOptions.series[3].data = monthAndroidLogDatas;
                    chart = new Highcharts.Chart(monthLogOptions);
                }
            });

        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">登录数</a></li>

                </ul>
            </div>

            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayLog">日</button>
                            <button class="btn tip-left" id="weekLog">周</button>
                            <button class="btn tip-right" id="monthLog">月</button>
                        </p>
                        <div id="dayLogCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekLogCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthLogCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>


            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>
    <script>
        $("#dayLog").click(function(){
            $("#dayLogCon").show();
            $("#weekLogCon").hide();
            $("#monthLogCon").hide();
        });

        $("#weekLog").click(function(){
            $("#dayLogCon").hide();
            $("#weekLogCon").show();
            $("#monthLogCon").hide();
        });

        $("#monthLog").click(function(){
            $("#dayLogCon").hide();
            $("#weekLogCon").hide();
            $("#monthLogCon").show();
        });


    </script>

@stop
